<!--
 * @Author: JohnYang
 * @Date: 2020-08-29 15:14:58
 * @LastEditors: JohnYang
 * @LastEditTime: 2020-08-29 15:34:06
-->
<template>
  <el-button
    v-bind="$attrs"
    @click="handleClick"
    size="medium"
    class="btn-block btn-txt btn-shadow"
  >
    <input
      type="file"
      ref="file"
      class="upload-control"
      @change="handleChange"
    />
    <slot />
  </el-button>
</template>

<script>
export default {
  name: "UploadControl",
  props: {
    content: {
      type: String,
      default: "文件上传",
    },
    upload: {
      required: true,
      type: Function,
      defaul: function () {
        return function () {
          console.error("the upload callback is required");
        };
      },
    },
  },
  computed: {
    file() {
      return this.$refs.file;
    },
  },
  methods: {
    handleClick() {
      this.file && this.file.click();
    },
    handleChange() {
      this.upload(this.file.files);
    },
    clear() {
      this.file && (this.file.value = "");
    },
  },
};
</script>


